<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>商品浏览简介</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="./layui/css/layui.css">
  <link rel="stylesheet" href="./css/style.css">
  <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
  <script src="js/resize.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

  <div class="layui-header">
    <div class="layui-logo"><img src="images/logo.jpg" alt="思联画饰"></div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <!-- <div class="nav-bar">
        <span>005859 | 广东富骏金控股权投资有限公司</span>
    </div> -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item serach">
        <a href="javascript:;">
          <img src="images/serach.jpg">
        </a>
      </li>
      <li class="layui-nav-item mess">
        <a href="javascript:;">
          <img src="images/mess.jpg">
        </a>
      </li>
      <li class="layui-nav-item">
        <a href="javascript:;" class="user">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          <span class="username">JunieLuo.KK</span>
        </a>
        
      </li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <a class="menu-btn" href="javascript:;"><i class="layui-icon layui-icon-spread-left" id="LAY_app_flexible"></i></a>
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <!-- <li class="layui-nav-item layui-nav-itemed" ><a href="javascript:;">首页</a></li> -->
        <li class="layui-nav-item">
          <a href="javascript:;">业务管理</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">商品浏览</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">销售管理</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">订单管理</a></dd>
            <dd><a href="javascript:;">购物清单</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">客户通讯录</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">群主管理</a></dd>
            <dd><a href="javascript:;">添加用户</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">统计及报告</a>
        </li>
      </ul>
      <a href="javascript:;" class="layui-btn layui-btn1">退出</a>
    </div>
  </div>
  
  <div class="layui-body">
    <div class="sp-body">
      <div class="sp-head">
        <h2>STEPHEN WHATCOTT</h2>
        <p>型号 | Type | Style | Medium | Subject | Colour</p>
      </div>
      <div class="sp-content clearfix">
        <div class="sp-pic"><img src="images/pr.png" alt=""></div>
        <div class="sp-info">
          <div class="sp-info-1">
            <h3>整柜 | £<span class="span1">800.00</span> / 散柜 | £<span class="span2">400.00</span></h3>
            <p>此价格不包含税费和运输费用，所需费用另行计算。</p>
          </div>
          <div class="sp-info-2">
            <input type="text" name="title" required lay-verify="required" value="3" data-value="3" autocomplete="off" class="layui-input">
            <button type="button" class="layui-btn add-cart">添加到购物车</button>
          </div>
          <div class="sp-info-3">
            <h4>商品介绍</h4>
            <p>宣纸的柔美，笔墨的遒劲，写意，留白......这些中国的笔墨精神和意向，是如意沙发的设计源点。 厚实的鹅羽绒填充软体，意喻
            宣纸般的柔美和温和。深色的椭圆形木框架演绎着笔墨意味的节奏和秩序感，二者交融、浑然宣纸的柔美，笔墨的遒劲，写意，
            留白......这些中国的笔墨精神和意向，是如意沙发的设计源点。 厚实的鹅羽绒填充软体，意喻宣纸般的柔美和温和。深色的椭圆
            形木框架演绎着笔墨意味的节奏和秩序感，二者交融、浑然写意，留白......这些中国的笔墨精神和意向，是如意沙发的设计源点。
            厚实的鹅羽绒填充软体，意喻宣纸般的柔美和温和。深色的椭圆形木框架演绎着笔墨意味的节奏和秩序感，二者交融、浑然。</p>
          </div>
          <div class="sp-info-4">
            <h4>选择尺寸</h4>
            <ul>
                <li class="select" data-value="800.00" data-bulk="400.00">W910mm x H1100mm ; W25.2inches x H29.5inches</li>
                <li data-value="1000.00" data-bulk="600.00">W910mm x H1100mm ; W25.2inches x H29.5inches</li>
            </ul>
          </div>
          <div class="sp-info-5">
            <div class="sp-item">
              <h5>BD0101银斜角</h5>
              <p>木线型号</p>
            </div>
            <div class="sp-item">
              <h5>FAM8020102</h5>
              <p>卡纸型号</p>
            </div>
            <div class="sp-item">
              <h5>进口画芯</h5>
              <p>装裱工艺</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</div>


<div class="ly-out edit-read-block" style="display:none">
  <div class="edit-read-title">
    <h3>商品名称商品名称</h3>
  </div>
  <div class="edit-read-cont cart-pop">
    <h4>请选择客户</h4>
    <div class="ly-out-select clearfix">
      <div class="ly-out-sitem">
        <form class="layui-form" action="">
        <select  name="" lay-verify="" lay-search>
          <option value="">请选择客户群组</option>
          <option value="010">客户群组1</option>
          <option value="021">客户群组2</option>
          <option value="021">客户群组3</option>
        </select> 
      </form>
      </div>
      <div class="ly-out-sitem">
        <form class="layui-form" action="">
        <select  name="" lay-verify="" lay-search>
          <option value="">请选择客户</option>
          <option value="010">客户1</option>
          <option value="021">客户2</option>
          <option value="021">客户3</option>
        </select> 
      </form>
      </div>
    </div>
  </div>
  <div class="edit-read-btn">
    <button type="button" class="layui-btn">确定加入购物车</button>
  </div>
</div>

<script src="./layui/layui.js"></script>
<script>

$(document).on('click','.menu-btn',function(){
  if($(this).find('i').hasClass('layui-icon-shrink-right')){
    $(this).find('i').removeClass('layui-icon-shrink-right');
    $(this).find('i').addClass('layui-icon-spread-left');
    $('.layui-layout-admin .layui-side').animate({
      width:"0"
    },200);

    $('.layui-layout-admin .layui-logo').animate({
      width:"0"
    },200);

    $('.menu-btn').animate({
      left:"10"
    },200);
    $('.layui-layout-admin .layui-body').animate({
      left:"0"
    },200);
  }else{
    $(this).find('i').removeClass('layui-icon-spread-left');
    $(this).find('i').addClass('layui-icon-shrink-right');
    $('.layui-layout-admin .layui-side').animate({
      width:"200px"
    },200);

    $('.layui-layout-admin .layui-logo').animate({
      width:"200px"
    },200);

    $('.menu-btn').animate({
      left:"200px"
    },200);
    $('.layui-layout-admin .layui-body').animate({
      left:"200px"
    },200);
  }
})
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
  
});

//Demo
layui.use('form', function(){
  var form = layui.form;  
});


//修改记录 弹出层
var layer;
layui.use('layer', function(){
  layer = layui.layer;

})

$(document).on('click','.sp-info-2 .add-cart',function(){
    layer.open({
      type: 1,
      title : '',
      skin: 'layui-layer-demo', //样式类名
      area: ['545px', '452px'],
      closeBtn: 0, //不显示关闭按钮
      anim: 2,
      shadeClose: true, //开启遮罩关闭
      content: $('.edit-read-block')
    });
})

//商品数量框聚焦\失去焦点事件
$(document).on('focus','.sp-info-2 .layui-input',function(){
  $(this).val('');
})

$(document).on('blur','.sp-info-2 .layui-input',function(){
  //文本框初值
  var inpt_val = $(this).data('value');

  if($(this).val() == ''){
    $(this).closest('.sp-info-2').find('.layui-input').val(inpt_val);
  }

})

//选择尺寸事件
$(document).on('click','.sp-info-4 li',function(){
  $(this).closest('.sp-info-4').find('li').removeClass('select');
  $(this).addClass('select');

  var full_price = $(this).data('value');
  var bulk_price = $(this).data('bulk');
  $('.sp-info-1 .span1').html(full_price);
  $('.sp-info-1 .span2').html(bulk_price);
})

</script>
</body>
</html>